<template>
	<div class="newsList">
		<div class="selectType">
			<span class="selectType_button" :class="isCard ? 'activeButton' : ''" @click="selectType(0)">
				<i class="iconfont icon-a-card1"></i>
				卡片
			</span>
			<span class="selectType_button" :class="!isCard ? 'activeButton' : ''" @click="selectType(1)">
				<i class="iconfont icon-tabulation"></i>
				列表
			</span>
		</div>
		<div v-if="contentList.length">
			<div class="card_content" v-show="isCard">
				<div class="card" v-for="(item, index) in contentList" :key="index">
					<a :href='Path+item.url' class='container_a'>
						<div class="card_img_content"><img class="card_img" :src="getImgPath(item.headImag)" /></div>
						<p class="card_title">{{ item.title }}</p>
						<div class="descripteAndDate">
							<span class="card_descript">{{}}</span>
							<span class="card_date">2023-02-23 15:30:40</span>
						</div>
						<div class="comment_zan_store">
							<span class="zan span">
								<i class="iconfont icon-a-Thumbs-up1"></i>
								<span class="comment_zan_store_number">{{ setNumber(item.likes || 0) }}</span>
							</span>
							<span class="store span">
								<i class="iconfont icon-a-Star1"></i>
								<span class="comment_zan_store_number">{{ setNumber(item.favorites || 0) }}</span>
							</span>
						</div>
					</a>
					
				</div>
			</div>
			<div class="list_content" v-if="!isCard"><moreNewsList :contentList="contentList" /></div>
			<div class="pagenation">
				<el-pagination
					background
					v-model:current-page="currentPage"
					layout="prev, pager, next"
					:current-page="current"
					@current-change="handleCurrentChange"
					:page-size="contentPage.size"
					:total="contentPage.total"
					prev-text="上一页"
					next-text="下一页"
				></el-pagination>
			</div>
		</div>
		<div v-else>
			<el-empty :image-size="200" description='暂无数据!' />
		</div>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';	
//import moreNewsList from './moreNewsList.vue';
export default {
	props: ['curentChannelId'],
	components: {
		moreNewsList: defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/moreNewsList.vue')),
	},
	data() {
		return {
			isCard: true,
			src: '../img/bg.jpg',
			src2: '../img/2.jpg',
			contentList: [],
			current: 1,
			contentPage: { size: 9, total: 0 },
			currentPage: 1,
			Path:getRootPath(),
			query:GetQueryString(),
		};
	},
	created() {},
	watch: {
		curentChannelId: {
			handler(newVal, oldVal) {
				this.getContentOfChannel(newVal);
			},
			deep: true
		}
	},
  mounted(){
		console.log(this.Path, 213213);
		this.getContentOfChannel('news')
	},
	methods: {
		selectType(val) {
			this.isCard = val == 1 ? false : true;
		},
		setNumber(val) {
			return SetNumber(val);
		},
		getContentOfChannel(val) {
			let param = {
				channelPaths: val,
				pageNum: this.currentPage,
				pageSize: this.contentPage.size,
				isTop:false,
			};
			contentApi.fetchContentOfChannel(param, res => {
				if (res.code == '00000 00000') {
					this.contentList = res.data.records;
					console.log(this.contentList, 232132132);
					this.contentPage = res.data;
				} else {
				}
			});
		},
		// 分页器
		handleCurrentChange(val) {
			this.currentPage = val;
			this.getContentOfChannel(this.curentChannelId);
		},
		getImgPath(url){
			return imgPath(url);
		},
	}
};
</script>

<style>
.newsList {
  width: 100%;
}
.newsList .selectType {
  margin-bottom: 24px;
}
.newsList .selectType .selectType_button {
  padding: 10px 16px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #efefef;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666;
  display: inline-flex;
  justify-content: space-between;
  margin-right: 12px;
  line-height: 14px;
  width: 80px;
  box-sizing: border-box;
  cursor: pointer;
}
.newsList .selectType .activeButton {
	color:#333;
  box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.1);
}
.newsList .card_content {
  display: flex;
  flex-wrap: wrap;
}
.newsList .card_content .card {
  width: 264px;
  height: 290px;
  margin-right: 24px;
	margin-bottom: 25px;
	
}
.newsList .card_content .card:hover{
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
}
.newsList .card_content .card .card_img_content {
  width: 100%;
  height: 148px;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}
.newsList .card_content .card .card_img_content .card_img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.newsList .card_content .card .card_img_content .card_img:hover {
  transform: scale(1.1);
}
.newsList .card_content .card .card_title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 18px;
  padding: 16px 16px 22px;
	box-sizing: border-box;
}
.newsList .card_content .card .card_title:hover {
  color: #FF3333;
}
.newsList .card_content .card .descripteAndDate {
  padding: 0 16px 41px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.newsList .card_content .card .descripteAndDate .card_descript {
  display: inline-block;
  width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 20px;
}
.newsList .card_content .card .comment_zan_store {
  width: 100%;
  padding: 0 16px;
	box-sizing: border-box;
}
.newsList .card_content .card .comment_zan_store .span {
  margin-right: 16px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.newsList .card_content .card .comment_zan_store .comment:hover{
	color:#FF3333;
}
.newsList .card_content .card .comment_zan_store .span .comment_zan_store_number {
  margin-left: 4px;
}
.newsList .card_content .card .comment_zan_store .iconfont {
  cursor: pointer;
}
.newsList .card_content .card:nth-of-type(3n) {
  margin-right: 0px;
}
.newsList .pagenation {
  margin-top: 40px;
}
.newsList .container_a {
  display: block;
}

</style>
